<template>
  <el-dialog
    title="删除原因"
    :visible.sync="delDialogData.isShow"
    width="480px"
    top="35vh"
    :before-close="labelHandleClose"
    @close="closedelDialog"
  >
    <el-form ref="ruleForm" :model="ruleForm" label-position="right">
      <el-form-item label="" prop="reason">
        <el-input
          v-model="ruleForm.reason"
          type="textarea"
          placeholder="请输入删除原因(必填)"
          maxlength="200"
          show-word-limit
          resize="none"
        >
        </el-input>
      </el-form-item>
    </el-form>

    <span slot="footer" class="dialog-footer">
      <el-button plain @click="cancelLabel">关 闭</el-button>
      <el-button type="success" class="submitPass" @click="submit"
        >提 交</el-button
      >
    </span>
  </el-dialog>
</template>
<script>
import { delAPI } from '@/api/appSetting/contentTag' // 接口
export default {
  props: ['delDialogData'],
  data() {
    return {
      ruleForm: {
        reason: '' // 删除
      }
    }
  },
  mounted() {
    this.id = this.delDialogData.params.id
    this.ruleForm.reason = this.delDialogData.params.reason
    this.tagCategoryId = this.delDialogData.id
  },
  methods: {
    // 提交不通过请求
    submit() {
      if (this.ruleForm.reason.length > 200) {
        this.$alert('不通过原因不可以超过200字', '系统提示', {
          confirmButtonText: '确定',
          type: 'error'
        })
        return
      }
      let params = {
        reason: this.ruleForm.reason
      }
      this.$confirm(`确定要删除该子频道？`, '系统提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          delAPI(
            this.tagCategoryId,
            this.id,
            params,
            (response) => {
              this.$emit('refresh')
              this.delDialogData.isShow = false
            },
            (response) => {
              this.$message({
                message: response.message,
                type: 'warning'
              })
              this.delDialogData.isShow = false
            }
          )
        })
        .catch(() => {
          this.delDialogData.isShow = true
        })
    },

    labelHandleClose(done) {
      this.cancelLabel()
      done()
    },
    cancelLabel() {
      // 关闭前清空
      this.delDialogData.isShow = false
    },
    // 关闭对话框回调
    closedelDialog() {
      this.ruleForm.reason = ''
    }
  }
}
</script>
<style lang="less">
.el-textarea__inner {
  height: 200px;
}
</style>
